<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来之窗——中文分词工具</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
        }
        .container {
            margin-top: 20px;
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            resize: vertical;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 10px 0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result-area {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .result-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #555;
        }
        .segment-result {
            word-wrap: break-word;
            line-height: 1.8;
        }
        .word-frequency {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #ccc;
        }
        .frequency-item {
            display: inline-block;
            background-color: #e8f5e9;
            padding: 4px 8px;
            margin: 5px;
            border-radius: 3px;
            font-size: 14px;
        }
        .controls {
            margin: 15px 0;
        }
        .control-group {
            margin-bottom: 10px;
        }
        label {
            margin-right: 15px;
        }
        input[type="text"] {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>未来之窗——中文分词工具</h1>
    
    <div class="container">
        <div>
            <textarea id="textInput" placeholder="请输入要分词的文本...">阿雪技术观
，未来之窗创始人，
在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦
    
阿雪精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件</textarea>
		</div>
        
        <div class="controls">
            <div class="control-group">
                <label>分词算法:</label>
                <select id="segmentAlgorithm">
                    <option value="bidirectional">双向最大匹配(默认)</option>
                    <option value="forward">正向最大匹配</option>
                    <option value="backward">反向最大匹配</option>
                </select>
            </div>
            
            <div class="control-group">
                <label for="customWord">添加自定义词汇:</label>
                <input type="text" id="customWord" placeholder="输入词汇后按添加按钮">
                <button onclick="addCustomWord()">添加</button>
            </div>
            
            <button onclick="performSegmentation()">执行分词</button>
        </div>
        
        <div class="result-area">
            <div class="result-title">分词结果:</div>
            <div id="segmentResult" class="segment-result"></div>
            
            <div class="word-frequency">
                <div class="result-title">词频统计:</div>
                <div id="frequencyResult"></div>
            </div>
        </div>
    </div>

    <!-- 引用分词服务脚本 -->
    <script src="wordSegmenter.js"></script>
    
    <script>
        // 初始化分词器
        let segmenter;
        
        // 页面加载完成后初始化
        window.onload = function() {
            // 创建分词器实例
            segmenter = new WordSegmenter();
            
            // 添加一些额外的常用词汇
            segmenter.addWords([
                '分词器', '中文', '工具', '算法', '自定义', '词汇',
                '频率', '统计', '示例', '功能', '测试', '文本'
				,'阿雪', '科技', '硅基生命', '东方仙盟', '未来之窗', '精通'
            ]);
            
            // 设置默认文本示例
           // document.getElementById('textInput').value = 
           //     '这是一个中文分词工具的示例。它可以将一段中文文本分割成有意义的词语，' +
           //     '并统计每个词语出现的频率。你可以选择不同的分词算法，也可以添加自定义词汇。';
        };
        
        // 执行分词
        function performSegmentation() {
            const text = document.getElementById('textInput').value.trim();
            const algorithm = document.getElementById('segmentAlgorithm').value;
            let result;
            
            if (!text) {
                alert('请输入要分词的文本');
                return;
            }
            
            // 根据选择的算法执行分词
            switch(algorithm) {
                case 'forward':
                    result = segmenter.segmentForward(text);
                    break;
                case 'backward':
                    result = segmenter.segmentBackward(text);
                    break;
                default:
                    result = segmenter.segment(text);
            }
            
            // 显示分词结果
            document.getElementById('segmentResult').innerHTML = 
                result.join(' <span style="color:#4CAF50">|</span> ');
            
            // 计算并显示词频
            const frequency = segmenter.getWordFrequency(text);
            let frequencyHtml = '';
            
            // 转换词频对象为HTML
            for (const word in frequency) {
                frequencyHtml += `<span class="frequency-item">${word}: ${frequency[word]}</span>`;
            }
            
            document.getElementById('frequencyResult').innerHTML = frequencyHtml;
        }
        
        // 添加自定义词汇
        function addCustomWord() {
            const wordInput = document.getElementById('customWord');
            const word = wordInput.value.trim();
            
            if (word) {
                segmenter.addWords(word);
                alert(`已添加自定义词汇: ${word}`);
                wordInput.value = '';
            } else {
                alert('请输入要添加的词汇');
            }
        }
    </script>
</body>
</html>
